<template>
  <div class="container">
    <div class="header">
      <h2>vuex使用示例</h2>
    </div>
    <div class="content">
      <div class="content-left">the time is: {{ currentTime | timeFormat }}</div>
      <div class="content-right">the count is: {{ getCount }}</div>
    </div>
    <div class="footer">
      <h2>Footer</h2>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { IndexMixin } from '@/mixins/IndexMixin'

export default {
  mixins: [IndexMixin],
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(['getCount'])
  },
  watch: {
    getCount(newVal, oldVal) {
      console.log(newVal, oldVal)
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.addTen()
      this.getCurrentTime()
    }, 1000)
  },
  destroyed() {
    clearInterval(this.interval)
  },
  methods: {
    ...mapActions([
      /* 
        将`this.addTen()` 映射为 `this.$store.dispatch('addTen')`
        `mapActions` 也支持载荷：
        将 `this.addTen(amount)` 映射为 `this.$store.dispatch('addTen', amount)`
      */
      'addTen'
    ])
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 20%;
}
.content {
  display: flex;
  flex-direction: row;
  flex: 1;
  &-left {
    width: 50%;
  }
  &-right {
    width: 50%;
  }
}
.footer {
  width: 100%;
  height: 20%;
}
</style>
